<template>
<el-dialog  class="thin_dialog"
            title="请填写密码信息"
            v-model="visible"
            @close="closeDialog"
            width="600">
  <el-form class="form_body"
           ref="sub_form"
           :rules="rules"
           :model="userInfo">
    <el-form-item label="帐号" prop="username">
      <el-input v-model="userInfo.username" />
    </el-form-item>
    <el-form-item label="手机" prop="phone">
      <el-input  v-model="userInfo.phone" />
    </el-form-item>
    <el-form-item label="原密码" prop="password">
      <el-input type="password"  v-model="userInfo.password" />
    </el-form-item>
    <el-form-item label="新密码" prop="new_password">
      <el-input type="password"  v-model="userInfo.new_password" />
    </el-form-item>
    <el-form-item label="确认新密码" prop="repeat_password">
      <el-input type="password" v-model="userInfo.repeat_password" />
    </el-form-item>
  </el-form>
  <template #footer>
    <div class="btn_group">
      <el-button size="default" type="primary" @click="saveSetting">保存</el-button>
    </div>
  </template>
</el-dialog>
</template>

<script>
import { useIndexStore } from "../stores/index.js";
import { mapStores } from "pinia";
import { updateUser } from "../api/index.js"
export default {
  name: "userSetting",
  props:{
    show:{
      type:Boolean,
      default:false
    }
  },
  computed:{
    ...mapStores(useIndexStore)
  },
  data(){
    return {
      visible:this.show,
      userInfo:{
        username:"",
        phone:"",
        password:"",
        new_password:"",
        repeat_password:""
      },
      rules:{
        username: [
          { required: true, message: '输入帐号', trigger: 'blur' },
          // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        ],
        phone: [
          {
            required: true,
            validator:this.validatePhone,
            trigger: 'blur',
          }
        ],
        password: [
          {
            required: true,
            message: '输入原密码',
            trigger: 'change',
          }
        ],
        new_password:[
          {
            required: true,
            message: '输入新密码',
            trigger: 'change',
          },
        ],
        repeat_password:[
          {
            required: true,
            validator: this.validatePass,
            trigger: 'blur',
          },
        ]
      }
    }
  },
  mounted(){
    this.userInfo.username = this.indexStore.userInfo.userName;
    this.userInfo.phone = this.indexStore.userInfo.mobile;
  },
  methods:{
    closeDialog(){
      this.$emit("sub_event",{act:"close_user_setting"});
    },
    saveSetting() {
      this.$refs.sub_form.validate((valid)=>{
        if(valid){
          updateUser({
            password:this.userInfo.password,
            userName:this.userInfo.username
          }).then(res => {
            if(res.code === 0){
              this.$message({
                type:"success",
                message:"密码已修改"
              });
              this.closeDialog();
            }else{
              this.$message.error({
                message:res.msg
              });
            }
          });
        }else{
          return false;
        }
      })
    },
    validatePhone(rule,value,callback){
      if(this.userInfo.phone.trim() === ""){
        callback(new Error("请输入手机号"))
      }else if(!/^1[3456789]\d{9}$/.test(this.userInfo.phone)){
        callback(new Error("请输入正确的手机号"));
      } else{
        callback();
      }
    },
    validatePass(rule,value,callback){
      if(this.userInfo.repeat_password !== this.userInfo.new_password){
        callback(new Error('重复密码与新密码不一致'));
      }else{
        callback();
      }
    }
  }
}
</script>

<style scoped>
  .form_body{
    width: 300px;
    margin: 20px auto;
    :deep(.el-form-item__label){
      width:95px;
      text-align: right;
    }
  }
  .btn_group{
    margin:20px;
  }
</style>
